<template>
	<view class="container">
		<view class="bg-to-right" style="height: 210rpx">
			<kg-custom :isBack="false" bgColor="bg-to-right">
				<block slot="left">
					<view class="text-17 padding-left-sm text-bold text-221815">
						任务大厅
					</view>
				</block>
			</kg-custom>
		</view>
		<view class="bg-white padding-sm" style="
        border-top-left-radius: 46rpx;
        border-top-right-radius: 46rpx;
        margin-top: -46rpx;
      ">
			<view class="flex justify-start align-center bg-F4F4F4 padding-left round" style="height: 78rpx">
				<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx; height: 25rpx"
					@click="toPage('/filePage/pages/m-search/m-search')"></image>
				<input type="text" value="" confirm-type="search" @confirm="search" v-model="keywords"
					class="text-13 f-grow1 padding-left-sm" placeholder="搜索任务" />
			</view>
			<view class="margin-top flex justify-between align-center" v-if="is_flag">
				<view class="padding-sm shadow radius10" style="width: 224rpx"
					@click="toPage('/filePage/pages/verified/verified')">
					<image :src="baseUrl + '/static/Send_order.png'" mode=""
						style="width: 58rpx; height: 58rpx; min-width: 58rpx"></image>
					<view class="text-15 text-bold text-221815"> 我要发单 </view>
					<view class="margin-top-xs text-767696 text-11">
						发布安装维修信息
					</view>
				</view>
				<view class="padding-sm shadow radius10" style="width: 224rpx"
					@click="toPage('/filePage/pages/Ship/Ship')">
					<image :src="baseUrl + '/static/Ship.png'" mode=""
						style="width: 58rpx; height: 58rpx; min-width: 58rpx"></image>
					<view class="text-15 text-bold text-221815"> 我要发货 </view>
					<view class="margin-top-xs text-767696 text-11"> 发布跑腿订单 </view>
				</view>
				<view class="padding-sm shadow radius10" style="width: 224rpx"
					@click="toPage('/filePage/pages/big-screen/big-screen')">
					<image :src="baseUrl + '/static/installation.png'" mode=""
						style="width: 58rpx; height: 58rpx; min-width: 58rpx"></image>
					<view class="text-15 text-bold text-221815"> 大屏安装 </view>
					<view class="margin-top-xs text-767696 text-11"> 我要大屏安装 </view>
				</view>
			</view>
			<swiper class="margin-top-sm margin-bottom-sm" style="height: 200rpx" :indicator-dots="true"
				:autoplay="true" :interval="3000" circular="true" :duration="1000" indicator-color="#F4F4F4"
				indicator-active-color="#ED7200">
				<swiper-item v-for="item in banners" @click="toLink(item)">
					<image class="width-sub height-sub radius10" :src="item.pic" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="">
				<view class="flex justify-start align-center padding-top padding-bottom">
					<view class="text-17 text-bold text-221815"> 订单中心 </view>
					<view class="text-sm text-999 margin-left-sm">
						5000+海量订单为你准备
					</view>
				</view>
				<view class="text-666 text-df flex justify-between align-center">
					<view class="text-221815 text-bold" :class="{ 'text-221815 text-bold': serviceType == '' }"
						@click="changeType('')">
						全部
					</view>
					<view class="position-relative" v-for="item in orderType" :class="{
              'text-221815 text-bold': serviceType == item.orderServiceType,
            }" @click="changeType(item.orderServiceType)">
						<view class="text-xs text-white flex justify-center align-center" style="
                position: absolute;
                top: -8rpx;
                right: -14rpx;
                background: #ff3636;
                border-radius: 12rpx;
                min-width: 28rpx;
                padding: 2rpx 4rpx;
              ">
							{{ item.orderCount }}
						</view>
						{{ item.orderServiceTypeName }}
					</view>
					<!-- 	<view class="position-relative">
						<view class="text-xs text-white flex justify-center align-center" style="position: absolute;top: -8rpx;right: -14rpx;background: #FF3636;border-radius: 12rpx;min-width: 28rpx;padding: 2rpx 4rpx;">
							999+
						</view>
						配送订单
					</view>
					<view class="position-relative">
						<view class="text-xs text-white flex justify-center align-center" style="position: absolute;top: -8rpx;right: -14rpx;background: #FF3636;border-radius: 12rpx;min-width: 28rpx;padding: 2rpx 4rpx;">
							9
						</view>
						竞标订单
					</view> -->
					<!-- <view class="color">
						筛选
					</view> -->
				</view>
			</view>
		</view>
		<view    @click="
            toPage(
              '/filePage/pages/order-detail/order-detail?serviceType=' +
                item.serviceType +
                '&id=' +
                item.id
            )" class="padding margin-sm bg-white radius10" v-for="item in list">
			<view class="flex justify-between align-center">
				<view class="text-333 text-bold text-xl text-cut">
					{{ item.description }}
				</view>
				<view class="text-767696 text-sm" style="min-width: 136rpx">
					{{ item.distance }}m
				</view>
			</view>
			<view class="text-999 margin-top-sm" v-if="item.sysCategoryName">
				{{ item.sysCategoryName }}
			</view>
			<view class="flex justify-between align-center">
				<view class="flex justify-start align-center text-sm">
					<view class="color" v-if="item.serviceType != 4">
						¥<text class="text-17">{{
              parseFloat(item.price / 100).toFixed(2)
            }}</text>
					</view>
					<view class="text-999 margin-left-sm">
						<text v-if="item.serviceType == 1">普通订单</text>
						<text v-else-if="item.serviceType == 2">配送订单</text>
						<text v-else-if="item.serviceType == 3">竞标订单</text>
						<text v-else>大屏订单</text>
					</view>
					<view class="color margin-left-xs" v-if="item.serviceType == 4">
						<text v-if="item.screenPastTime < 0"> 已过期 </text>
						<text v-else> 剩余时间{{ item.screenPastTime }}小时 </text>
					</view>
					<view class="color margin-left-xs" v-else>
						<text v-if="item.pastTime < 0"> 已过期 </text>
						<text v-else> 剩余时间{{ item.pastTime }}小时 </text>
					</view>
				</view>
				<button v-if="item.serviceType == 3" class="text-15 text-white bg-color round padding-left padding-right padding-top-sm padding-bottom-sm">
					立即竞标
				</button>
				<button v-else class="text-15 text-white bg-color round padding-left padding-right padding-top-sm padding-bottom-sm">
					立即抢单
				</button>
			</view>
		</view>
		<uni-load-more :status="loading" />
		<view class="cu-modal" :class="modalName == 'ModalAuthor' ? 'show' : ''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl text-20"> 请先授权登录 </view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="hideModal" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button v-if="canIUseProfile == false" open-type="getUserInfo" @getuserinfo="getUserInfo"
						class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
					<button v-else @tap="getUserInfo" class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="{ show: isShow }">
			<view class="cu-dialog bg-white">
				<view class="cu-bar justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl text-20"> 获取用户手机号 </view>
				<view class="flex justify-between align-center padding text-lg">
					<view @click="isShow = false" class="bg-D7D7D7 text-gray radius5" style="padding: 32rpx 96rpx">
						取消
					</view>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="bg-color text-white radius5" style="padding: 32rpx 96rpx">
						确定
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BetterPull from "@/common/libs/BetterPull";
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = "loading";
					const [err, res] = await this.$get(
						this.$api.orderService_listOrderServicePool, {
							pageNum: page,
							pageSize: 10,
							serviceStatus: 1,
							keywords: this.keywords,
							serviceType: this.serviceType,
							latitude: this.latitude,
							longitude: this.longitude,
						}
					);
					if (res) {
						// console.log(res)
						var data = res.data.list;
						// this.total = res.data.total
						done(data);
						if (data.length < 10) {
							this.loading = "noMore";
						} else {
							this.loading = "more";
						}
						// console.log(this.loading)
					}
					if (err) {
						done([]);
						this.loading = "noMore";
					}
				},
			}),
		],
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				loading: "more",
				keywords: "",
				banners: [],
				orderType: [],
				serviceType: "",
				modalName: null,
				latitude: "",
				longitude: "",
				canIUseProfile: false,
				userInfo: '',
				isShow: false,
				session_key: "",
				phoneNumber: "",
				is_flag: "",
				recommendCode:''
			};
		},
		onLoad() {
			if (wx.getUserProfile) {
				console.log("--check getUserProfile--OK");
				this.canIUseProfile = true;
			}
		},
		onShow() {
			if(uni.getStorageSync('scene')){
				this.recommendCode  = uni.getStorageSync('scene')
			}
			let that = this;
			// if (uni.getStorageSync('mobile')) {
			// 	this.phoneNumber = uni.getStorageSync('mobile')
			// }
			uni.getLocation({
				type: "gcj02",
				success: function(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					// uni.getStorage({
					//   key: "userId",
					//   success: function () {
					that.getFlag();
					that.getOrderCount();
					that.getBanner();
					// that.getUser();
					//     // if (!that.phoneNumber) {
					//     // 	that.isShow = true
					//     // }
					//   },
					//   fail: function () {
					//     that.modalName = "ModalAuthor";
					//   },
					// });
				},
				fail: function(err) {
					that.$util.msg("请允许定位");
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/home",
						});
					}, 1500);
				},
			});
		},
		onPullDownRefresh() {
			let that = this;
			uni.getLocation({
				type: "gcj02",
				success: function(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					// uni.getStorage({
					//   key: "userId",
					//   success: function () {
					that.getFlag();
					that.getOrderCount();
					that.getBanner();
					// that.getUser();
					//     // if (!that.phoneNumber) {
					//     // 	that.isShow = true
					//     // }
					//   },
					//   fail: function () {
					//     that.modalName = "ModalAuthor";
					//   },
					// });
				},
				fail: function(err) {
					that.$util.msg("请允许定位");
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/home",
						});
					}, 1500);
				},
			});
		},
		methods: {
			async getFlag() {
				const [err, res] = await this.$get(this.$api.hiddenFlag);
				if (res) {
					this.is_flag = res.data;
					uni.setStorage({
						key: "is_flag",
						data: res.data,
					});
					// console.log(res)
				}
			},
			toPage(url) {
				// console.log(this.phoneNumber);
				let that = this;
				uni.getStorage({
					key: "userId",
					success: function() {

						if (
							url == "/filePage/pages/big-screen/big-screen" ||
							url == "/filePage/pages/verified/verified" ||
							url == "/filePage/pages/Ship/Ship"
						) {
							// console.log('``````',that.userInfo)
							that.getUser(url)
						} else {
							that.$util.openNewPage(url);
						}
						// if (!that.phoneNumber) {
						// 	that.isShow = true
						// } else {
						// 	if (url == '/filePage/pages/big-screen/big-screen' || url ==
						// 		'/filePage/pages/verified/verified' || url == '/filePage/pages/Ship/Ship') {
						// 		if (that.userInfo.userIdentityStatus == 1) {
						// 			that.$util.openNewPage(url)
						// 		} else {
						// 			uni.showModal({
						// 				title: '提示',
						// 				content: '您还没有认证',
						// 				cancelText: '再看看',
						// 				confirmText: '去认证',
						// 				success: res => {
						// 					if (res.confirm) {
						// 						that.$util.openNewPage(
						// 							'/filePage/pages/real-name/real-name')
						// 					}
						// 				}
						// 			})
						// 		}
						// 	} else {
						// 		that.$util.openNewPage(url)
						// 	}
						// }
					},
					fail: function() {
						// #ifdef MP-WEIXIN
						that.modalName = "ModalAuthor";
						// #endif

						// #ifdef APP-PLUS
						uni.navigateTo({
							url: "/pages/login/login",
						});
						// #endif
					},
				});
			},
			async getUserInfo() {
				let that = this;
				// this.hideModal()
				this.modalName = null;
				uni.login({
					provider: "weixin",
					success: function(loginRes) {
						// console.log(loginRes.code);
						// 获取用户信息
						uni.getUserInfo({
							provider: "weixin",
							success: function(infoRes) {
								// console.log(infoRes.userInfo.nickName);
								// console.log(infoRes.userInfo.avatarUrl)
								that.getLogin(
									loginRes.code,
									infoRes.userInfo.nickName,
									infoRes.userInfo.avatarUrl
								);
							},
						});
					},
				});
			},
			async getLogin(code, nickName, avatarUrl) {
				uni.showLoading({
					title: "正在登录",
					mask: true,
				});
				const data = {
					code: code,
					nickname: nickName,
					headimg: avatarUrl,
					latitude: this.latitude,
					longitude: this.longitude,
				};
				if (this.recommendCode) {
					data["recommendCode"] = this.recommendCode;
				}
				const [err, res] = await this.$post(this.$api.loginWX, data);
				if (res) {
					this.isShow = true;
					this.session_key = res.data.session_key;
					uni.setStorage({
						key: "session_key",
						data: res.data.session_key,
					});
					// console.log(res)
					uni.setStorage({
						key: "token",
						data: res.data.openid,
					});
					uni.setStorage({
						key: "userId",
						data: res.data.userId,
					});
					uni.setStorage({
						key: "openid",
						data: res.data.openid,
					});
					uni.hideLoading();
					this.getUser();
					this.list = [];
					uni.startPullDownRefresh();
					this.$util.msg(res.message);
				}
			},
			hideModal() {
				this.modalName = null;
				uni.switchTab({
					url: "/pages/home/home",
				});
			},
			search() {
				this.serviceType = "";
				this.list = [];
				uni.startPullDownRefresh();
			},
			async getBanner() {
				const [err, res] = await this.$get(this.$api.home_getAdvertisementList, {
					adPositionType: 4,
				});
				if (res) {
					this.banners = res.data;
					// console.log(res)
				}
			},
			async getOrderCount() {
				const [err, res] = await this.$get(
					this.$api.orderService_orderServiceTypeCount, {
						adPositionType: 4,
					}
				);
				if (res) {
					this.orderType = res.data;
					// console.log(res);
				}
			},
			changeType(e) {
				this.serviceType = e;
				this.list = [];
				uni.startPullDownRefresh();
			},
			async getUser(e) {
				const that = this
				const [err, rs] = await this.$get(this.$api.userDetail);
				if (rs) {
					// console.log(rs) 
					this.userInfo = rs.data;
					if (e) {
						if (rs.data.userIdentityStatus == 1) {
							this.$util.openNewPage(e);

						} else {
							uni.showModal({
								title: "提示",
								content: "您还没有认证",
								cancelText: "再看看",
								confirmText: "去认证",
								success: (res) => {
									if (res.confirm) {
										that.$util.openNewPage(
											"/filePage/pages/real-name/real-name"
										);
									}
								},
							});
						}
					}

					uni.setStorageSync("userInfo", rs.data);
				}
			},
			async getPhoneNumber(e) {
				this.isShow = false;
				console.log(e);
				var iv = e.detail.iv;
				var encryptedData = e.detail.encryptedData;
				var session_key;
				if (uni.getStorageSync("session_key")) {
					session_key = uni.getStorageSync("session_key");
				} else {
					session_key = this.session_key;
				}
				const data = {
					session_key,
					iv,
					encryptedData,
				};
				const [err, rs] = await this.$get(this.$api.getWXPhone, data);
				if (rs) {
					this.$util.msg(rs.message);
					this.phoneNumber = rs.data.mobile;
					uni.setStorageSync("mobile", rs.data.mobile);
				}
			},
			toLink(e) {
				let that = this;

				uni.getStorage({
					key: "userId",
					success: function() {
						if (e.redirectType == 1) {
							// #ifdef APP-PLUS
							plus.runtime.openURL(encodeURI(e.redirectUrl), function(res) {
								console.log(res);
							});
							// #endif

							// #ifdef MP-WEIXIN
							that.$util.openNewPage(
								"/filePage/pages/open-link/open-link?url=" + e.redirectUrl
							);
							// #endif
						} else {

							that.$util.openNewPage(
								"/filePage/pages/goods-detail/goods-detail?id=" + e.redirectUrl
							);
						}
					},
					fail() {
						// #ifdef MP-WEIXIN
						that.modalName = "ModalAuthor";
						// #endif
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: "/pages/login/login",
						});
						// #endif
					}

				})
			},
		},
	};
</script>

<style lang="scss">
</style>
